<template>
  <Form
    ref="formRef"
    :model="stateFormModel"
    :rules="rules"
    :labelCol="{ span: 6 }"
    :wrapperCol="{ span: 13, offset: 1 }"
  >
    <FormItem name="state" label="发布状态">
      <Select placeholder="文章发布状态" v-model:value="stateFormModel.state">
        <SelectOption v-for="(state, j) in publishStates" :key="j" :value="state.id">
          <Space>
            <component :is="state.icon"></component>
            {{ state.name }}
          </Space>
        </SelectOption>
      </Select>
    </FormItem>
    <FormItem name="origin" label="文章来源">
      <Select placeholder="文章来源" v-model:value="stateFormModel.origin">
        <SelectOption v-for="(state, i) in articleOrigins" :key="i" :value="state.id">
          <Space>
            <component :is="state.icon"></component>
            {{ state.name }}
          </Space>
        </SelectOption>
      </Select>
    </FormItem>
    <FormItem name="public" label="公开类型">
      <Select placeholder="文章公开类型" v-model:value="stateFormModel.public">
        <SelectOption v-for="(state, x) in articlePublics" :key="x" :value="state.id">
          <Space>
            <component :is="state.icon"></component>
            {{ state.name }}
          </Space>
        </SelectOption>
      </Select>
    </FormItem>
    <FormItem name="lang" label="内容语言">
      <Select placeholder="文章语言" v-model:value="stateFormModel.lang">
        <SelectOption v-for="(state, x) in articleLanguages" :key="x" :value="state.id">
          <Space>
            <component :is="state.icon"></component>
            {{ state.name }}
          </Space>
        </SelectOption>
      </Select>
    </FormItem>
    <FormItem name="disabled_comment" label="文章评论">
      <RadioGroup v-model:value="stateFormModel.disabled_comment" name="disabled_comment">
        <RadioButton :value="false">
          <CheckCircleOutlined />
          允许评论
        </RadioButton>
        <RadioButton :value="true">
          <StopOutlined />
          禁止
        </RadioButton>
      </RadioGroup>
    </FormItem>
    <Divider />
    <Button type="primary" block :loading="submitLoading" @click="submit">
      <template #icon>
        <CheckOutlined />
      </template>
      提交
    </Button>
  </Form>
</template>

<script setup lang="ts">
import {
  Button,
  Divider,
  Form,
  FormInstance,
  FormItem,
  RadioButton,
  RadioGroup,
  Select,
  SelectOption,
  Space,
} from 'ant-design-vue'
import { PropType, reactive, ref, toRaw, watchEffect } from 'vue'
import { ArticleOrigin, articleOrigins } from '@/constants/article/origin'
import { PublishState, publishStates } from '@/constants/publish'
import { ArticlePublic, articlePublics } from '@/constants/article/public'
import { ArticleLanguage, articleLanguages } from '@/constants/article/language'
import { CheckOutlined, CheckCircleOutlined, StopOutlined } from '@ant-design/icons-vue'
import type { Article } from '@/constants/article'

export type StateFormModel = Pick<
  Article,
  'state' | 'origin' | 'public' | 'lang' | 'disabled_comment'
>

export interface StateFormExpose {
  validate: () => Promise<StateFormModel>
}

const props = defineProps({
  form: {
    type: Object as PropType<StateFormModel>,
  },
  submitLoading: {
    type: Boolean,
  },
})

const emits = defineEmits(['submit'])

// 获取标签
const formRef = ref<FormInstance>()
const stateFormModel = reactive<StateFormModel>({
  state: PublishState.Published,
  origin: ArticleOrigin.Original,
  public: ArticlePublic.Public,
  lang: ArticleLanguage.Chinese,
  disabled_comment: false,
})
const rules = {
  state: [{ required: true, message: '必选' }],
  origin: [{ required: true, message: '必选' }],
  public: [{ required: true, message: '必选' }],
}

const submit = () => {
  emits('submit')
}

const validate = () => {
  return new Promise<StateFormModel>((resolve, reject) => {
    formRef.value
      ?.validateFields()
      .then(() => {
        const data = toRaw(stateFormModel)
        resolve(data)
      })
      .catch((err) => {
        const nameList = Object.keys(err.values)
        formRef.value?.scrollToField(nameList[0], {
          behavior: 'smooth',
        })
        reject(err)
      })
  })
}

watchEffect(() => {
  stateFormModel.lang = props.form?.lang!
  stateFormModel.state = props.form?.state!
  stateFormModel.public = props.form?.public!
  stateFormModel.origin = props.form?.origin!
  stateFormModel.disabled_comment = props.form?.disabled_comment!
})

// 暴露方法
defineExpose({
  validate,
})
</script>

<style lang="less" scoped></style>
